<template>
<div class="menu-wrap">
  <div class="type-title">
    {{menuChild.title}}
    <span class="more iconfont icon-31fanhui2"></span>
  </div>
  <div class="menu-content">
     <div class="item" v-for="(item, index) in menuChild.children"
          :key="item.key + index">
       <span class="text" @click="onSearch(item)">{{item.title}}</span>
     </div>
  </div>
</div>
</template>

<script>
export default {
  name: "menu-list",
  props: {
    menuChild: Object
  },
  methods: {
    onSearch(item) {
      this.$router.push(`/goods?text=${item.title}`);
    }
  }
}
</script>

<style scoped lang="less">
.menu-wrap {
  display: flex;
  margin-bottom: 12px;
  align-items: baseline;
  .type-title {
    display: flex;
    justify-content: end;
    margin-right: 16px;
    color: @t-title-color;
    font-size: 12px;
    font-weight: 500;
    min-width: 70px;
    .more {
      margin-left: 8px;
      color: @t-title-color;
      font-size: 12px;
    }
  }
  .menu-content {
    flex: 1;
    .item {
      display: inline-block;
      margin-bottom: 12px;
      margin-right: 12px;
      cursor: pointer;
      .text {
        display: block;
        color: @t-text-color;
        font-weight: 400;
        font-size: 12px;
        &:hover {
          color: @primary-color
        }
      }
    }
  }
}
</style>